<template>
  <section  class="clearfix taskDetail_box">
    <!-- 这是nav -->
		<Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 发布信息 -->
    <section class="task_Details_box dipW clearfix">
      <h3 class="task_Details_title wid_pad_lf">任务详情</h3>
      <div class="task_Details_ifon dip ju_al_lf wid_pad_lf">
        <span class="task_Details_ifonimgBox dip ju_al_lf">
          <!-- <img :src="'../../../static/images/task/'+taskDetilasIfon.NameIMg+''" alt="" class="task_Details_ifonimg"> -->
          <img :src="userIfonIMG.picture" alt="" class="task_Details_ifonimg">
        </span>
        <span class="task_Details_ifonText dipW">
          <i class="user_con_ifontext" v-if="userIfonIMG.nickName != ''">{{userIfonIMG.nickName}}</i>
          <i class="task_Details_ifonname dip ju_al_lf" v-else-if="userIfonIMG.name != ''">{{userIfonIMG.name}}</i>
          <i class="task_Details_ifonname dip ju_al_lf" v-else>{{userIfonIMG.phoneNumber}}</i>
          <i class="task_Details_evaluate dip ju_al_lf">
           <img :src="'./static/images/task/'+taskDetilasIfon.NameIMgeval+''" alt="">          
           <img :src="'./static/images/task/'+taskDetilasIfon.NameIMgeval+''" alt="">          
           <img :src="'./static/images/task/'+taskDetilasIfon.NameIMgeval+''" alt="">          
           <img :src="'./static/images/task/'+taskDetilasIfon.NameIMgeval+''" alt="">          
           <img :src="'./static/images/task/'+taskDetilasIfon.NameIMgeval+''" alt="">          
          </i>
        </span>
      </div>
      <ul class="task_Details_cont clearfix">
        <li class="dipW ju_al_bet task_Details_contChild wid_pad_lf">
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle">任务要求：</span>
            <span class="task_Details_contcont"><b>{{this.userIFon.requirements}}</b></span>
          </div>
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle Childbox_mar">作品单价：</span>
            <span class="task_Details_contcont  Childbox_cor"><b>￥{{this.userIFon.univalent}}</b></span>
          </div>
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle">需求类型：</span>
            <span class="task_Details_contcont"><b>{{this.userIFon.demandType}}</b></span>
          </div>
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle Childbox_mar">截止时间：</span>
            <span class="task_Details_contcont"><b>7天</b></span>
          </div>
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle">附件数量：</span>
            <span class="task_Details_contcont"><b>{{this.userIFon.quantity}}</b></span>
          </div>
          <div class="task_Details_Childbox dip ju_al_lf">
            <span class="task_Details_conttitle Childbox_mar">时间要求：</span>
            <span class="task_Details_contcont"><b>{{this.userIFon.requireTime}}</b></span>
          </div>
          
        </li>
      </ul>
    </section>
    <!-- 详情说明 -->
    <section class="task_Details_box task_Details_Rem dipW clearfix">
      <!-- <h3 class="task_Details_title wid_pad_lf task_Details_Remarks" >备注信息</h3> -->
      <ul class="task_Details_cont clearfix">
        <li class="dipW ju_al_bet task_Details_contChild wid_pad_lf">
          <p class="task_Details_textarea">{{textDetailsBlock}}</p>
        </li>
      </ul>
      <h3 class="task_Details_title task_Details_Remarks dip ju_al_bet" >
        <span> 实付款</span>
        <span class="task_Details_moneyZ">￥{{this.userIFon.remuneration}}.00</span> 
       </h3>      
    </section>
    <!-- 支付方式 -->
    <div class="money_balance_padfr">
      <div class="money_balance_box money_balance_padfrf dip ju_al_bet" v-for="(itemsf,index) in  moneybalance" :key="index" @click="addactiveIMG(index,moneybalance)" v-if="itemsf.ifblock">
        <span class="money_logoIMg" >
          <img :src="'./static/images/Order/'+itemsf.logoUrl+''" alt="">
        </span>
        <span class="money_txet dip ju_al_lf">
          <i>{{itemsf.text}}</i>
          <i class="money_txet_child" v-if="itemsf.block">（可用余额：<em>￥{{moneyUser.balance}}</em>）</i>
        </span>
        <span class="money_activeIMg">
          <img :src="'./static/images/Order/'+itemsf.activeIMg+''" alt="" v-if="itemsf.ind">
          <img :src="'./static/images/Order/'+itemsf.activeIMgnone+''" alt="" v-else>
        </span>
      </div>
    </div>
    <!-- 这是微信支付-->		
		<footer class="payment_mode dip">
			<button class="mall_ToPay ToPay——bg" @click="seterrorWechet()">取消订单</button>     
			<button class="mall_ToPay Asyougo_bg" @click="gettaskPay()">立即支付</button>
		</footer>
		<!-- 余额弹出框 -->
		<div class="orderDetilserror" v-if="this.yueblock">
			<div class="dipW ju_al orderDetilserror_child tftra">
				<span class="ODS_fiast dipW ju_al">
					<em>您的账户余额不足</em>
					<em>是否需要充值?</em>
				</span>
				<span class="dip ju_al ODS_last bg_li">
					<em class="ODS_em1" @click="wechetRecharge()">取消</em>
					<em class="ODS_em2" @click="AddwechetRecharge()">立即充值</em>
				</span>
			</div>
		</div>
  </section>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
import Specific from '../../assets/bus/js/Specific.js'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/taskContent',
        text:'发布需求',
      },
      taskDetilasIfon:{
        // NameIMg:'task_Detilas_ifonImg.png',
        // Nametaext:'王雪峰',
        NameIMgeval:'task_detilas_eval.png'
      },
      moneybalance:[
        {
          logoUrl:'Order_yue.png',
          text:'余额支付',
          ind:true, //变换背景
          block:true, //显示额
          ifblock:true, //这是显示微信点击的事件,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'balancePayment'
        }
        ,{
          logoUrl:'Order_wechet.png',
          text:'微信支付',
          ind:false,
          block:false,
          ifblock:true,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'WeChatPayment'
        }
      ],
      moneywechetNone:{
        logoUrl:'money_active_wechet.png',
        text:'微信支付 ',
        ifblock:false, //这是显示
        activeIMgnone:'ORder_cool.png',
      },
      textDetails:'我希望我的海报能够很高端、大气、上档次，然后突出我们的产品。',//默认
      textDetailsBlock:'',
      yueblock:false,
      userIFon:'' ,//这是获传来的信息
      moneyUser:'',//这是个人余额
      userIfonIMG:'',
      OPenID:'',//这是获取OPid
    }
  }
  ,components:{Nav},
  methods:{
    addactiveIMG(index,typr){
      if(typr.length >=2){
        for(var i = 0;i<typr.length;i++){
          typr[i].ind = false;
        }
        typr[index].ind = true;
        this.moneybalanceS = typr[index].moneybalanceS
      }
    },
    wechetRecharge(){
			this.yueblock = false;
		},
		AddwechetRecharge(){
			var _this = this
			var t;
			clearTimeout(t)	
		  this.$router.push({
				path:'/bomNav/userRecharge/1'//要去的路由充值
			})
			// alert('刚充值成功')
			// t = setTimeout(function(){
				_this.yueblock = false;	
			// },1000)
    },
    onBridgeReady(resf){
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":resf.data.unifiedOrd.appId,     //公众号名称，由商户传入     
					"timeStamp":resf.data.unifiedOrd.timeStamp,     ////       //时间戳，自1970年以来的秒数    
					"nonceStr":resf.data.unifiedOrd.nonceStr, //随机串     
					"package":resf.data.unifiedOrd.package,     
					"signType":"MD5",      ///    //微信签名方式：     
					"paySign":resf.data.unifiedOrd.sign //微信签名 
				},
				// console.log(gf)
				function(res){     
					if(res.err_msg == "get_brand_wcpay_request:ok" ) {
              this.$router.push({path:'/bomNav/taskseccess'})            
						// this.dvfdf = res
					} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				}
			); 
		},
    gettaskPay(){
      let OrderIfon = {
        "paymentMode":this.moneybalanceS,
        "demandId":this.ff.id,
        "univalent":this.ff.univalent,
        "quantity":this.ff.quantity,
        "requirements":this.ff.requirements,
        "openid":this.OPenID
      }
      if(this.moneybalanceS == 'balancePayment'){
        if(this.moneyUser.balance < this.userIFon.univalent){
          this.yueblock = true;
          alert('亲，余额不足')
        }else{
          this.$store.dispatch('showloader')
          this.yueblock = false;
          this.axios.post(this.$busPoat.paymenttask(),OrderIfon).then(resf =>{
            var st;
            clearTimeout(st)
            st = setTimeout(() =>{
              if(resf != null || resf != undefined){
                this.$store.dispatch('hideloader')    
                  if(resf.data.iplancode == 200){
                    // alert('亲，商品支付成功')
                    this.$router.push({path:'/bomNav/taskseccess'})
                  }else if(resf.data.iplancode == 105){
                    this.yueblock = true;
                    alert('亲，余额不足')
                  }else if(resf.data.iplancode == 101 || resf.data.iplancode ==102 ||  resf.data.iplancode ==106){
                    alert('支付失败')
                  }else if(resf.data.iplancode == 104){
                    alert('亲，您的任务已支付')
                    this.$router.replace({ path: '/bomNav/taskContent' })
                  }
              }else{
                  this.$store.dispatch('hideloader')                
                  alert('请求加载过慢...')
                }
                clearTimeout(st)                                                                       
              },2000)  
          }).catch(error=>{
            this.$store.dispatch('hideloader')
            alert('支付失败')
          })
        }
      }else if(this.moneybalanceS == 'WeChatPayment'){ //这是微信支付  
        this.axios.post(this.$busPoat.paymenttask(),OrderIfon).then(resf =>{
          if(resf.data.iplancode == 200){
            if(typeof WeixinJSBridge == "undefined"){
              if(document.addEventListener){
                document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
              }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
              }
            }else{
              this.onBridgeReady(resf);
            }
          }else if(resf.data.iplancode == 105){
            this.yueblock = true;
            alert('亲，余额不足')
          }else if(resf.data.iplancode == 101 || resf.data.iplancode ==102 ||  resf.data.iplancode ==106){
            alert('支付失败')
          }else if(resf.data.iplancode == 104){
            alert('亲，您的任务已支付')
          }
        }).catch(error=>{
          alert('支付失败')
        })
      }
    },
    seterrorWechet(){
      this.$store.dispatch('showloader')
      this.axios.post(this.$busPoat.cancel(),{"demandId":this.ff.id}).then(res =>{
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res != null || res != undefined){
            this.$store.dispatch('hideloader')              
              // console.log(res)
              if(res.data.iplancode == 101){
                alert('亲，您的发布任务订单已取消')
                this.$router.push({path:'/bomNav/taskContent'})
              }else  if(res.data.iplancode == 102){
                console.log('亲，您的发布任务订单已取消')
              }else  if(res.data.iplancode == 103){
                alert('亲，您的订单已全部支付，未有可以取消的订单')
              }
           }else{
            this.$store.dispatch('hideloader')
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },2000)
      }).catch(err =>{
        this.$store.dispatch('hideloader')
         alert('取消订单失败')
      })
    }
  },
  created(){
    //loding
    this.ff = JSON.parse(sessionStorage.getItem('usertaskifonS')) //获取订单信息
    this.OPenID = sessionStorage.getItem('openId') //获取ID
    this.userIFon = this.ff 
    sessionStorage.setItem('demandIdORderISONF',this.userIFon.id)
    // console.log(this.userIFon.id)
    Specific.specilcObj(this.userIFon) //转义
    for(var i = 0;i<this.moneybalance.length;i++){ //这是获取支付方式
      if(this.moneybalance[i].ind == true){
        this.moneybalanceS = this.moneybalance[i].moneybalanceS
      }
    }
    if(this.ff.demandIntroduction != null){
      this.textDetailsBlock = this.ff.demandIntroduction
    }else{
     this.textDetailsBlock = this.textDetails
    }
    this.axios.post(this.$busPoat.userInfo(),{}).then(response=>{
      this.moneyUser = response.data
      this.userIfonIMG = this.moneyUser.user
      console.log(this.userIfonIMG)
    }).catch(error=>{
      alert('发布中断失败')
      console.log(error)
    })
  }
}
</script>
<style lang="scss" scoped>
.task_Details_box{
  width: 100%;
	background: #fff;
  margin-top: .8rem;
  font-family: MicrosoftYaHei;
  .task_Details_title{
    width: 100%;
    height: 1rem;
    font-size:.3rem;
    color:#333;
    line-height: .8rem;
    font-weight: 600;
    border-bottom:.1rem solid #f2f2f2;
  }
  .task_Details_ifon{
    width: 100%;
    height: 1.12rem;
    border-bottom:.02rem solid #f2f2f2;
    .task_Details_ifonimgBox{
      height: 100%;
      width: 16.1%;
      .task_Details_ifonimg{
        width: 0.8rem;
        height: 0.8rem;
          -webkit-border-radius:50%;
             -moz-border-radius:50%;
                  border-radius:50%;
      }
    }
    .task_Details_ifonText{
      height: 100%;
      width: 83.9%;
      padding:.15rem 0rem;
      .task_Details_ifonname{
        width: 100%;
        height: 50%;
        font-size: .24rem;
        margin-left:.26rem;
        font-weight: 600;
      }
      .task_Details_evaluate{
        width: 100%;
        height: 50%;
       img{
         width: 0.2rem;
         height: 0.2rem;
         margin-right:.1rem;
       }
      }
    }
  }
  .task_Details_cont{
    width: 100%;
    background: #f2f2f2;
    padding-bottom:.1rem;
    .task_Details_contChild{
      width: 100%;
      background: #fff;
      height: 2.34rem;
      padding:.2rem .4rem;
      .task_Details_Childbox{
        width: 50%;
        height: 33.33%;
        font-size: .24rem;   
        font-weight: 600;     
        .task_Details_conttitle{
          color:#666;
        }
        .task_Details_contcont{
          color:#333;
        }
        .Childbox_mar{
          margin-left:30%;
        }
        .Childbox_cor{
          color:#E94949;
        }
      }
    }
  }
}
.task_Details_Rem{
  margin:0;
  .task_Details_Remarks{
    background: #fff;
    // color:#fff;
      font-size: .24rem;
      color:#666;
      padding:0rem .4rem;
  }
  .task_Details_moneyZ{
      font-size: .28rem;
      color:#ff7200;
      font-weight: 500;
  }
  .task_Details_textarea{
    width: 100%;
    height: 100%;
    padding:.2rem;
    border:.02rem solid #f2f2f2;
    color: #999;
    font-size: .24rem;
    letter-spacing:.02rem;
    line-height: .3rem;
  }
}
//支付事件
.money_balance_padfr{
  padding:0rem .4rem;
  width: 100%;
  height: 2.05rem;
}
.money_balance_padfrf{
  // &:last-child{
  //   border-bottom:0;
  // }
}
.money_balance_box{
  height: 49.8%;
  border-bottom:.02rem solid #f2f2f2;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  .money_logoIMg{
    width: 8%;
    height: 43%;
    margin-left:6%;
  }
  .money_txet{
    font-size: .28rem;
    color:#666;
    width: 81%;
    height: 52%;
    font-weight: 600;
    padding-left:2%;
    .text_acirve{
      color:#C6C6C6;
    }
    .money_txet_child{
      // width: 70%;
      font-size: .24rem;
      color:#666666;
      em{
        color:#FF7200;
      }
    }
  }
  .money_activeIMg{
    width: 8%;
    height: 43%;
    margin-right:6%;
  }
}
//微信点击事件
.payment_mode{
  width: 100%;
  height: 0.98rem;
  background: #fff;
  justify-content:space-around;
  align-items: center;
  position: fixed;
  bottom:0;
  z-index: 51;
  .mall_ToPay{
    width: 50%;
    // position: relative;
    font-size:.3rem;
    height: 100%;
    line-height: 0.98rem;
    text-align: center;
    color:#fff; 
  }
  .ToPay——bg{
    background: #ABABAB ;
  }
  .ToPay——bg::before,.Asyougo_bg::after{
    content:"";
    width:0;
    height:0;
    position:absolute;
  }
  // .ToPay——bg::before{
  //   left:35.5%;
  //   top:0%;
  //   border:solid .98rem transparent;
  //   border-right:solid .26rem #FF7200;       /* 黑色大三角形 */
  //   border-top:solid .98rem transparent;
  // }
  .Asyougo_bg::after{
    left:50%;
    top:0%;
    border-top:solid 0rem transparent;
    border-left:solid .26rem #ABABAB;       /* 黑色大三角形 */
    border-bottom:solid .98rem transparent
  }
  .Asyougo_bg{
    background: #FF7200;
  }
}
//余额不足
.orderDetilserror{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  .orderDetilserror_child{
		border:0;
    width: 70%;
    // height: 22%;
    background: rgba(255,255,255,1);
    position: relative;
    top:50%;
    left:50%;
    span{
			width: 100%;
      font-size: .28rem;
      color:#666666;
			text-align: center;
			font-family: 'MicrosoftYaHei';
    }
    .ODS_fiast{
      height: 1.8rem;
      padding:9% 25%;
			// line-height: .4rem;
			font-weight: 600;
    }
    .ODS_last{
			height: .8rem;
      border:0;
      // background: #000;
      em{
        width: 50%;
        height: 100%;
				font-weight: 600;
				color:#FFFFFF;
        line-height: .8rem;
      }
      // .ODS_em2{

      // }
    }
  }
}

</style>
